<template>
	<!-- 20230224 -->
	<view class="bar-order-nav-cn">
		<!-- 页面内容 -->
		<view class="cn-content">
			<view class="width-100p padding-tb-10 radius-20 border-box bg-ff">
				<!-- 我的订单 -->
				<view class="padding-lr-30 line-height-100 border-bottom-ed flex align-center justify-between">
					<view class="text-28 text-bold">我的订单</view>
					<view class="flex align-center" @click="link(0,2)">
						<view class="text-28 text-77">查看全部订单</view>
						<text class="tyIcon-arrow-right text-30 text-77"></text>
					</view>
				</view>

				<!-- 我的导航 -->
				<view class="padding-tb-30 flex justify-around align-center">

					<view v-for="(item,index) in list.list" :key="index" @click="link(index,1)" class="">
						<!-- 订单状态 -->
						<view class="flex flex-direction align-center">
							<view class="position-relative">
								<!-- 图标 -->
								<text class="line-height-60 txt-center text-4d" :class="item.icon" style="width: 60rpx;"
									:style="{'font-size' : item.size + 'rpx'}"></text>
								<!-- 数字角标 -->
								<view
									class="number-subscript bg-main radius-50p text-20 text-ff line-height-30 text-center"
									v-if="item.number">
									{{item.number}}
								</view>
							</view>
							<text class="margin-top-10 text-24">{{item.name}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		props: {
			list: { //数据
				type: Object,
				default: {}
			}
		},
		methods: {
			link(index, type) {
				if (common.isLogin()) {
					if (type == 1) {
						uni.navigateTo({
							url: this.list.list[index].url
						})
					} else if (type == 2) {
						uni.navigateTo({
							url: this.list.last.url
						})
					}
				} else {
					this.$emit('needLogin')
				}
			}
		}
	}
</script>

<style scoped>
	/* 角标 */
	.number-subscript {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 30rpx;
		height: 30rpx;
	}
</style>